<template>


    <!--  写代码 先写完 在抽取成组件的形式-->
    <!-- 1 导航栏
    2 轮播图
    3 菜单栏
    4 列表展示
    5 底部导航 -->
    <HomeNavBar></HomeNavBar>

    <!-- 轮播图组件 -->
    <HomeSwiper></HomeSwiper>


    <!-- 网格模块 -->
    <HomeNav></HomeNav>
    <!-- 倒计时 -->
    <HomeTimeBack></HomeTimeBack>

    <!-- 商品列表 -->
    <HomeGoodsList></HomeGoodsList>

</template>

<script setup lang="ts">


import HomeSwiper from '@/components/home/HomeSwiper.vue'
import HomeNavBar from '@/components/home/HomeNavBar.vue'

import HomeNav from '@/components/home/HomeNav.vue'

import HomeGoodsList from '@/components/home/HomeGoodsList.vue'

import HomeTimeBack from '@/components/home/HomeTimeBack.vue'







</script>



<style lang="scss" scoped>
// scoped  只在当前这个组件生效
.van-nav-bar {
    font-weight: bold;
    background: #d30707;

    //  这个是样式穿透
    :deep(.van-nav-bar__left) {
        a {
            color: #fff;
        }

        font-size: 16px;
    }

    :deep(.van-nav-bar__title) {
        background: #fff;
        height: 60px;
        max-width: 70%;
        line-height: 62px;
        flex: 1;
        border-radius: 30px;
        box-sizing: border-box;
        padding-left: 36px;
        text-align: left;
        color: #232326;
        font-size: 15px;
    }

    :deep(.van-nav-bar__right) {
        font-size: 16px;

        a {
            color: #fff;
        }
    }
}
</style>